<!--  -->
<template>
    <div style="height:100%;z-index:-1">
        <div id="mapid">
        </div>
    </div>
</template>

<script>

    import "leaflet.chinatmsproviders";


    export default {
        data() {
            return {
                map: {},
                // clickPoint:""
            };
        },

        components: {},

        computed: {},

        methods: {},

        mounted() {
            /**
             * 天地图内容
             */
            // var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
            //     maxZoom: 18,
            //     minZoom: 2
            //   }),
            //   normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
            //     maxZoom: 18,
            //     minZoom: 2
            //   }),
            //   imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
            //     maxZoom: 18,
            //     minZoom: 2
            //   }),
            //   imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
            //     maxZoom: 18,
            //     minZoom: 2
            //   });
            //
            // //高德地图数据
            // var normalm = L.tileLayer.chinaProvider("GaoDe.Normal.Map", {
            //   maxZoom: 18,
            //   minZoom: 2
            // });
            // var imgm = L.tileLayer.chinaProvider("GaoDe.Satellite.Map", {
            //   maxZoom: 18,
            //   minZoom: 2
            // });
            //
            // var imga = L.tileLayer.chinaProvider("GaoDe.Satellite.Annotion", {
            //   maxZoom: 18,
            //   minZoom: 2
            // });


            // var normal = L.layerGroup([normalm, normala]),
            //   image = L.layerGroup([imgm, imga]);


            // var baseLayers = {
            //   "影像": image,
            //   "地图": normal,
            // };

//定义要显示的边界
//       var corner1 = L.latLng(34.36611072883117, 100.35461425781251),
//         corner2 = L.latLng(30.600093873550072, 104.46350097656251),
//         bounds = L.latLngBounds(corner1, corner2);


            this.map = L.map("mapid", {
                center: [30.029866486852946, 101.01722717285158],
                zoom: 12,
                // layers: [image],
                zoomControl: false,
                // maxBounds: bounds
            });
            L.tileLayer.chinaProvider('Google.Normal.Map',{maxZoom: 20, minZoom: 2}).addTo(this.map);
            L.tileLayer.chinaProvider('Google.Satellite.Map',{maxZoom: 20, minZoom: 2}).addTo(this.map);
            L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion',{maxZoom:20, minZoom: 2}).addTo(this.map);

            // L.control.layers(baseLayers, null).addTo(map);

            L.control.zoom({
                zoomInTitle: "放大",
                zoomOutTitle: "缩小",
                position: "bottomright"
            }).addTo(this.map);

        }

    };
</script>
<style>
    #mapid {
        height: 100%;
    }

    .change_view {
        position: fixed;
        top: 90px;
        right: 120px;
        z-index: 401;
    }
</style>
